<template>
	<view class="page">
		<view class="pageBg">
			<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/memberbg2.png" mode="aspectFill"></image>
		</view>
		<view class="flex0">
			<u-navbar :fixed='false' bgColor="transparent" @leftClick="navBack" title="档案详情">
				<view slot="center" class="navTitle">
					档案详情
				</view>
			</u-navbar>
			<view class="pd30">
				<view class="filterBlock">
					<view class="block">
						<view class="full">
							<DateRange formate="YYYY-MM-DD" @change="dateRangeChange"></DateRange>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true"  @scrolltolower="loadMore" :scroll-top="scrollTop" class="scrollView pt30">
				<view class="pd30">
					<view class="archivesDetail">
						<view class="item" v-for="(i,index) in list">
							<view class="idate">
								{{i.time}}
							</view>
							<view class="box1 box" v-if="i.type==5">
								<view class="bt">
									{{i.bizName}}
								</view>
								<view class="ul">
									<view class="li">
										<view class="ll">
											访谈时间
										</view>
										<view class="lr">
											{{i.InterviewTime}}
										</view>
									</view>
									<view class="li">
										<view class="ll">
											负责教师
										</view>
										<view class="lr">
											{{i.InterviewTeacher}}
										</view>
									</view>
								</view>
								<view class="btns">
									<navigator open-type="navigate" :url="'/subpage/expert/archives/consultingDetail?id='+i.id" class="navigator btn">
										查看详情
									</navigator>
								</view>
							</view>
							<view class="box2 box" v-if="i.type==1">
								<view class="bl">
									<view class="bt">
										{{i.bizName}}
									</view>
									<view class="btns">
										<navigator :url="'/subpage/viewTest/viewTest?id='+i.id" class="navigator btn">
											查看详情
										</navigator>
									</view>
								</view>
								<view class="br">
									<view class="stageTag"
										:style="'color:'+stageOption(1).color+';background:'+stageOption(1).bgColor">
										{{i.bizContent}}
									</view>
								</view>
							</view>
							<view class="box3 box" v-if="i.type==2">
								<view class="bl">
									{{i.bizName}}
								</view>
								<view class="br">
									<view class="stageTag2"
										:style="'color:'+stageOption(i.bizContent).color+';background:'+stageOption(i.bizContent).bgColor">
										{{stageOption(i.bizContent).label}}
									</view>
								</view>
							</view>
							<view class="box3 box" v-if="i.type==3">
								<view class="bl">
									{{i.bizName}}
								</view>
								<view class="br btns">
									<navigator :url="'/subpage/teacher/intervene/detail?levelRecordId='+i.bizId" class="navigator btn">
										查看详情
									</navigator>
								</view>
							</view>
						</view>
					</view>
					<u-overlay :show="isLoading" :opacity="0.2">
						<u-loadmore color="#fff" iconColor="#fff" status="loading" />
					</u-overlay>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemid: '',
				oldScrollTop: 0,
				scrollTop: 0,
				startDate: '',
				pageIndex: 1,
				endDate: '',
				total: 0,
				info: '',
				isLoading: false
			}
		},
		methods: {
			dateRangeChange(e) { //日期范围变化
				var that = this;
				that.startDate = e.start;
				that.endDate = e.end;
				that.initData();
			},
			updateScroll(e) {
				this.oldScrollTop = e.detail.scrollTop;
			},

			initData() {
				this.pageIndex = 1
				this.list = []
				this.getList()
			},
			loadMore() {
				var that = this;
				if (that.list.length < that.total && !that.isLoading) {
					that.pageIndex++;
					that.getList();
				}
			},
			getList() {


				this.$api.dictList({
					dictType: 'crisis_management_record_type'
				}, res => {
					if (res.code == 200) {
						this.sexOptions = res.data
					}
				})

				if (this.isLoading) {
					return;
				};
				this.isLoading = true;
				let post = {
					pageNo: this.pageIndex,
					// userName: this.keyword,
					userId: this.itemid,
					startTime:this.startDate,
					endTime:this.endDate,
					methodType: 'get',
					pageSize: 20
				}
				this.$api.profilesRecord(post, res => {
					if (res.code == 200) {
						this.total = res.data.total;
						let _list = res.data.list
						this.list = [...this.list, ..._list]
						// 判断所有数据是否请求完毕
						this.isLoading = false;
					}else{
						this.$common.errorToShow(res.message)
						this.isLoading = false;
					}
				})
			},
		},
		computed: {

		},
		onLoad(e) {
			this.itemid = e.id
			this.initData();
		}
	}
</script>

<style lang="scss" scoped>
	.slot-content {
		flex: 0 0 auto;
		width: 100%;
	}

	/deep/.u-popup__content {
		border-radius: 30rpx !important;

		.u-modal__title {
			font-size: 40rpx !important;
			color: #65554d !important;
			padding-top: 40rpx !important;
			line-height: 1;
			font-weight: normal !important;
		}

		.u-modal__content {
			padding: 40rpx 40rpx 0 !important;
		}

		.u-line {
			display: none;
		}

		.u-modal__button-group__wrapper {
			height: 120rpx;
			border-radius: 0 !important;

			.u-modal__button-group__wrapper__text {
				font-size: 28rpx !important;
			}
		}
	}

	.filterBlock {
		padding-top: 20rpx;

		.block {
			.search {
				background: #fff;
				border-color: #fff;
				margin-left: 10rpx;
			}
		}

		.select {
			margin-left: 0;
			width: 280rpx;

			/deep/ .uni-select {
				background: #fff !important;
				border-color: #fff !important;
			}
		}
	}
</style>